<!--
 * @Date: 2024-06-03 14:36:14
 * @Autor: 叶世超
 * @LastEditors: 叶世超 yesc163@163.com
 * @LastEditTime: 2024-06-04 15:04:42
 * @FilePath: \reslib-web\src\views\knowledge\relationship\addEditingDialog.vue
 * @Description: 描述
 * @version: 版本
-->
<template>
  <div class="add-editing-dialog">
    <el-dialog v-model="dialogFormVisible" :title="props.dialogTitle" :before-close="handleClose"
      :fullscreen="fullscreen" width="30%" draggable align-center>
      <el-form ref="dialogFormRef" :rules="dialogRules" :model="ruleForm">
        <el-form-item label="关系名称" :label-width="formLabelWidth" prop="relationName">
          <el-input v-model="ruleForm.relationName" placeholder="请输入关系名称" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirm(dialogFormRef)">确定</el-button>
          <el-button @click="cancel(dialogFormRef)">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="tsx" setup>
import * as FormApi from "@/api/kg/relationship";
import type { FormInstance, FormRules } from 'element-plus'

const props = defineProps({
  dialogTitle: String,
  operationType: String,
  currentOperationData: Object,
})
interface RuleForm {
  relationName: string
}
const ruleForm = reactive<RuleForm>({
  relationName: '',
})
const dialogRules = reactive<FormRules<RuleForm>>({
  relationName: [{ required: true, message: '请输入关系名称', trigger: 'change' }],
})
const emits = defineEmits(['subEvent'])
const dialogFormVisible = ref(false) // 对话框窗体可见
const dialogFormRef = ref<FormInstance>() // 对话框表单ref
const fullscreen = ref(false) // 是否全屏
const formLabelWidth = '80px'

const open = async () => {
  if (props.operationType === 'edit') Object.assign(ruleForm, props.currentOperationData)
  dialogFormVisible.value = true
}
defineExpose({ open })
// 弹窗确定
const confirm = async (formEl: FormInstance | undefined) => {
  console.log(formEl)
  console.log(' console.log(props.operationType)', props.operationType)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(props.operationType)
      if (props.operationType === 'add') {
        const params = { ...ruleForm }
        FormApi.insertRDJCGraphRelation(params).then((res) => {
          dialogFormVisible.value = false
          formEl.resetFields()
          ElMessage({
            message: '添加成功',
            grouping: true,
            showClose: true,
            type: 'success'
          })
          emits('subEvent')
        })
      } else if (props.operationType === 'edit') {
        const params = {
          id: props.currentOperationData.id,
          relationName: ruleForm.relationName,
        }
        FormApi.updateRDJCGraphRelation(params).then((res) => {
          dialogFormVisible.value = false
          formEl.resetFields()
          ElMessage({
            message: '修改成功',
            grouping: true,
            showClose: true,
            type: 'success'
          })
          emits('subEvent')
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 弹窗取消
const cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  dialogFormVisible.value = false
}
// 弹窗关闭回调
const handleClose = (done: () => void) => {
  Object.keys(ruleForm).map(item => ruleForm[item] = '')
  done()
}
</script>
<style lang="scss" scoped>
.add-editing-dialog {}
</style>
